<html>
	<head>
		<link type="text/css" rel="stylesheet" href="app://static/jquery/css/ui-lightness/jquery-ui.custom.css" />
		<link type="text/css" rel="stylesheet" href="app://static/jpager/css/jqpagination.css" />
		
		<script type="text/javascript" src="app://static/jquery/js/jquery.min.js"></script>
		<script type="text/javascript" src="app://static/jquery/js/jquery-ui.custom.min.js"></script>
		<!-- pager scripts -->
		<script type="text/javascript" src="app://static/jpager/jquery.jqpagination.min.js"></script>
		<script type="text/javascript" src="app://utils.js"></script>
		<script type="text/javascript" src="app://database.js"></script>
		
		<script type="text/javascript">
			$(document).ready(function(){
				db = getDB();
				sysconfig = getSysconfig(db, '');
				category = null;
				if (sysconfig.hasOwnProperty('category')){
					category = sysconfig['category'];
				}
				
				var tbmain = $('#product_main');
				var name = $("#name"), barcode= $("#barcode"), specification = $("#specification"), 
				category= $("#category"), sub_category = $("#sub_category"), stock= $("#stock"), tag = $("#tag");
				allFields = $( [] ).add( name ).add( barcode ).add( specification ).add( category ).add( sub_category ).add( stock ).add( tag ),
				tips = $( ".validateTips" );
				$( "#dialog-form" ).dialog( "destroy" );
				
				$( "#dialog-form" ).dialog({
					autoOpen: false,
					height: 440,
					width: 350,
					modal: true,
					buttons: {
						"增加": function() {
							var bValid = true;
							allFields.removeClass( "ui-state-error" );
							bValid = bValid && checkLength( name, "商品名称", 2, 50 );
							bValid = bValid && checkLength( category, "类别", 2, 50 );
							if ( bValid ) {
								// 新增商品成功后操作：添加到数据库中，追加到页面上
								new_product = {name:name.val(), category:category.val(), barcode:barcode.val(),
									sub_category:sub_category.val(), specification:specification.val(),
									stock:stock.val(), tag:tag.val()};
								added_product = addProdutTodb(new_product); // get new added product
								if(added_product != null){
									//showProductList(tbmain, db, sysconfig, {});
									//showPageNav(db, {});
									$( this ).dialog( "close" );
									location.reload() 
								}else{
									updateTips('商品名称已经存在: {0}, 请选用其他商品名。'.format(name.val()))
								}
							}
						},
						'取消': function() {
							$( this ).dialog( "close" );
						}
					},
					close: function() {
						allFields.val( "" ).removeClass( "ui-state-error" );
					}
				});
				
				showProductList = function(tbl, db, sysconfig, args){
					productes = getProductes(db, args);
					var str = '<tr class="ui-widget-header "><th>{0}</th><th>{1}</th><th>{2}</th><th>{3}</th><th>{4}</th><th>{5}</th></tr>'.format('编号','品名','类别','规格', '库存', '标签');
					if (!productes){ tbl.html(str); return null;}
					for(var i in productes){
						product= productes[i];
						str = str + '<tr>' +
							'<td>' +product.id+ '</td>' + 
							'<td>' +product.name+ '</td>' + 
							'<td>' +product.category + '-' + product.sub_category + '</td>' + 
							'<td>' +product.specification+ '</td>' + 
							'<td>' +product.stock+ '</td>' + 
							'<td>' +product.tag + '</td>' + 
							'</tr>';
					}
					tbl.html(str);
				}
				
				addProdutTodb = function(product){
					new_id = addProduct(db, product); // in databases.js
					if (new_id > 0){
						product.id = new_id;
						return product;
					}
					return null;
				}
				
				showPageNav = function(db, args){
				    pages = getTotalpagesOfProduct(db, args);
                    $('.pagination').jqPagination({
                        max_page    : pages,
                        paged       : function(page) {
                            args.page = page;
                            showProductList(tbmain, db, sysconfig, args);
                        }
                    });
				}
				
				showProductList(tbmain, db, sysconfig, null);
                showPageNav(db, {})
                
				$('#btn_addproduct').bind('click', function(event){
                    $("#dialog-form").dialog('open');
                });
			});
		</script>
		<style type="text/css">
		#product_main{
			width:100%;
			text-align: center;
		}
		</style>
	</head>
	<body style="padding: 6px;">
		<div id="product_nav">
			<ul style="list-style: none; padding: 3px;">
				<li><a href="javascript:void(0);" id="product_list" >商品列表</a></li>
				<li><a href="app://modules/m_product_category.html" target="mainframe" id="product_category" >商品分类</a></li>
				<li><a href="app://modules/m_product_putinwarehouse.html" target="mainframe" id="product_warehouse" >入库商品</a></li>
				<li><a href="app://modules/m_product_totalwarehouse.html" target="mainframe" id="product_count" >仓库盘点</a></li>
			</ul>
		</div>
		<div id="submenu">
		    <ul><li><a href="javascript:void(0)" id="btn_addproduct">添加商品</a></li></ul>
		</div>
		<table id="product_main" class="ui-widget ui-widget-content" >
		</table>
		<div class="gigantic pagination">
		    <a href="#" class="first" data-action="first">«</a>
		    <a href="#" class="previous" data-action="previous">‹</a>
		    <input type="text">
		    <a href="#" class="next" data-action="next">›</a>
		    <a href="#" class="last" data-action="last">»</a>
		</div>
		
		<div id="dialog-form" title="新增商品" >
			<p class="validateTips">* 标识为必填项</p>
			<form>
				<table>
				<tr><td><label for="name">商品名称</label></td>
					<td><input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" /> *</td></tr>
				<tr><td><label for="barcode">条形码</label></td>
					<td><input type="text" name="barcode" id="barcode" value="" class="text ui-widget-content ui-corner-all" /></td></tr>
				<tr><td><label for="specification">规格</label></td>
					<td><input type="text" name="specification" id="specification" value="" class="text ui-widget-content ui-corner-all" /></td></tr>			
				<tr><td><label for="">类别</label></td>
					<td><input type="text" name="category" id="category" value="" class="text ui-widget-content ui-corner-all" /> *</td></tr>
				<tr><td><label for="">子类</label></td>
					<td><input type="text" name="sub_category" id="sub_category" value="" class="text ui-widget-content ui-corner-all" /> </td></tr>
				<tr><td><label for="">库存</label></td>
					<td><input type="text" name="stock" id="stock" value="" class="text ui-widget-content ui-corner-all" /></td></tr>
				<tr><td><label for="">标签</label></td>
					<td><input type="text" name="tag" id="tag" value="" class="text ui-widget-content ui-corner-all" /></td></tr>
				</table>
			</form>
		</div>
	</body>
</html>